<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
<!--	<script src="lib/babel.min.js"></script>-->
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
	// 1- JSX的本质即是虚拟DOM
	// 2- JSX是通过babel来调用React.createElement方法实现的虚拟DOM
	// 3- 借助于root.render将虚拟DOM转为真实DOM进行页面的渲染。
	// const root = ReactDOM.createRoot(document.querySelector("#app"));
	// const  str = "什么是幸福？幸福就是我没有认真听课，后来发现其它认真听课的同学也没听懂这就是幸福！";
	// const num = 1;
	// const num2 = 2;
	// const obj = {
	// 	color:"red",
	// 	fontSize:16
	// }
	// root.render((
	// 	<div>
	// 		<p style={obj}>{str}</p>
	// 		<p>{num}</p>
	// 		<p>{num2}</p>
	// 	</div>
	// ))
</script>
<script>
	// 以下程序是通过babel处理以后的。
	"use strict";
	var root = ReactDOM.createRoot(document.querySelector("#app"));
	var str = "什么是幸福？幸福就是我没有认真听课，后来发现其它认真听课的同学也没听懂这就是幸福！";
	var num = 1;
	var num2 = 2;
	var obj = {
		color: "red",
		fontSize: 16
	};
	root.render(
		React.createElement(
			"div",
			null,
			React.createElement(
				"p",
				{
					style: obj
				},
				str
			),
			React.createElement(
				"p",
				null,
				num
			),
			React.createElement(
				"p",
				null,
				num2
			))
	);

</script>
</html>